<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-08-31 16:57:20
 * @LastEditTime : 2021-09-10 10:20:36
 * @FilePath     : /newhope/src/components/title/index.vue
 * @Description  : 
-->


<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-08-31 16:34:34
 * @LastEditTime : 2021-08-31 16:41:38
 * @FilePath     : /newhope/src/components/windBlowsTheFragranceOfRice/components/title.vue
 * @Description  : 
-->
<script lang='ts' setup>
import { withDefaults } from 'vue'
import windBlowsTheFragranceOfRice from '/@/assets/images/title/windBlowsTheFragranceOfRice.png'
const props = withDefaults(defineProps<{ src: string }>(), {
	src: windBlowsTheFragranceOfRice
})
console.log(props)
</script>
<template>
	<div class="title">
		<img alt="title" :src="props.src" />
	</div>
</template>


<style lang='scss' scoped>
.title {
	user-select: none;
	position: absolute;
	top: 162px;
	left: 50%;
	transform: translateX(-50%);
	img {
		width: 259px;
		height: 151px;
		// 淡入
		-webkit-animation: focus-in-contract-bck 1s
			cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
		animation: focus-in-contract-bck 1s
			cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
		// 左右摇晃
		// -webkit-animation: shake-horizontal 0.8s
		// 	cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
		// animation: shake-horizontal 0.8s
		// 	cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
	}
}
@-webkit-keyframes focus-in-contract-bck {
	0% {
		letter-spacing: 1em;
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		-webkit-filter: blur(12px);
		filter: blur(12px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(12px);
		transform: translateZ(12px);
		-webkit-filter: blur(0);
		filter: blur(0);
		opacity: 1;
	}
}
@keyframes focus-in-contract-bck {
	0% {
		letter-spacing: 1em;
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		-webkit-filter: blur(12px);
		filter: blur(12px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(12px);
		transform: translateZ(12px);
		-webkit-filter: blur(0);
		filter: blur(0);
		opacity: 1;
	}
}

@-webkit-keyframes shake-horizontal {
	0%,
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	20%,
	40%,
	60% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
	80% {
		-webkit-transform: translateX(8px);
		transform: translateX(8px);
	}
	90% {
		-webkit-transform: translateX(-8px);
		transform: translateX(-8px);
	}
}
@keyframes shake-horizontal {
	0%,
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	10%,
	30%,
	50%,
	70% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	20%,
	40%,
	60% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
	80% {
		-webkit-transform: translateX(8px);
		transform: translateX(8px);
	}
	90% {
		-webkit-transform: translateX(-8px);
		transform: translateX(-8px);
	}
}
</style>

